<template>
    <!-- 头部导航区内容 -->
    <div class="header">
      <div class="header-navigation">
        <button class="navigation-ecah" 
        :class="{show:echaIndex==index}" 
        v-for="(item, index) in childname" :key="index"
         @click="setIndex(item,index)"
         >{{item.stuName}}</button>
      </div>
    </div>
</template>

<script>
import { childrenmessageAPI} from '@/api/luoc.api/luo4'
export default {
  data () {
    return {
      echaIndex: 0,
      childname:[],
      child:[],
      stuId:''
    }
  },
  methods: {
    setIndex(item,index) {
      this.echaIndex = index
      this.stuId=item.stuId
      console.log(this.stuId)
    },
    async makeinfofn(){
            const res =await childrenmessageAPI()
            this.stuId=res.data[0].stuId
            console.log(this.stuId)
            res.data.map(item => {
                this.childname.push(item)
            })
            this.getData()
        },
        getData() {
            this.childname.forEach(item => {
                this.child=item
            })
        }
  },
  created(){
      this.makeinfofn()
      this.$bus.$emit('demo',this.stuId)
      }
}
</script>

<style scoped>
/* 头部导航区内容 */
.header{
  position: relative;
  height: 3.125rem;
  margin: 0rem 14.375rem 0rem 14.375rem;
}

/* 导航区 */
.header-navigation {
  position: absolute;
  left:0;
}

/* 标签导航区 */
.navigation-ecah {
  font-size: 1.25rem;
  border: 0rem solid;
  margin: 1.25rem 0rem 0 1.25rem;
  background: #ffffff;
}

.show {
  color: #7C0000;
  padding-bottom: .3125rem;
  border-bottom: .1875rem solid #7C0000;
}

</style>